<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <div>
      <div class="mobile-dumber">
        <el-input class="rectangle-1738" v-model="description" type="textarea" :rows="17" maxlength="1000"></el-input>
        <div class="mobile-dumber2">
          <div class="synopsis">Synopsis</div>
        </div>
      </div>
    </div>
    <div class="gs">故事梗概</div>

    <div>
      <div class="mobile-dumber3">
        <div class="mobile-dumber4">
          <div class="2">分镜头脚本</div>
          <div class="storyboard">Storyboard</div>
        </div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary2">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary3">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-text2" @click="gen1">生成</div>
    <div class="button-text3" @click="gen2">生成</div>
    <div class="button-text4" @click="gen1">生成</div>
    <div>
      <el-input class="rectangle-17382" v-model="story1" type="textarea" :rows="2" maxlength="1000"></el-input>
      <div class="mobile-dumber5">
        <div class="_1">镜号1</div>
      </div>
    </div>
    <div>
      <el-input class="rectangle-17383" v-model="story2" type="textarea" :rows="2" maxlength="1000"></el-input>

      <div class="mobile-dumber6">
        <div class="_2">镜号2</div>
      </div>
    </div>
    <div>
      <el-input class="rectangle-17384" v-model="story3" type="textarea" :rows="2" maxlength="1000"></el-input>

      <div class="mobile-dumber7">
        <div class="_3">镜号3</div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary4">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary5">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-text5" @click="gen4">生成</div>
    <div class="button-text6" @click="gen5">生成</div>
    <div>
      <el-input class="rectangle-17385" v-model="story4" type="textarea" :rows="2" maxlength="1000"></el-input>
      <div class="mobile-dumber8">
        <div class="_4">镜号4</div>
      </div>
    </div>
    <div>
      <el-input class="rectangle-17386" v-model="story5" type="textarea" :rows="2" maxlength="1000"></el-input>
      <div class="mobile-dumber9">
        <div class="_5">镜号5</div>
      </div>
    </div>
    <div class="rectangle5"></div>
    <div class="home">Home</div>
    <div class="services2">Support</div>
    <div class="services3">Contact</div>
    <div class="services4">Pricing</div>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {
      description: "",
      story1: "",
      story2: "",
      story3: "",
      story4: "",
      story5: "",
    };
  },
  
  mounted() {
    this.description = this.$route.query.description
    
    var that = this
    this.$http({
        url: "/story/query",
        method: "post",
        headers: {
          'Content-Type': 'application/json'
        },
        data: {
          "description": that.description
        }
      }).then((res) => {
        if (res.status == 200) {
          that.story1 = res.data.result[0]
          that.story2 = res.data.result[1]
          that.story3 = res.data.result[2]
          that.story4 = res.data.result[3]
          that.story5 = res.data.result[4]
        }
        else {
          that.$notify.error({
            title: '服务器失败 :/chat/gen_des/',
            message: res.response,
            duration: 5000
          });
        }
      })
  },
  methods: {
    gen1 () {
      this.$router.push({path: '/set_picture', query:{'story': this.story1}})
    },
    gen2 () {
      this.$router.push({path: '/set_picture', query:{'story': this.story2}})
    },
    gen3 () {
      this.$router.push({path: '/set_picture', query:{'story': this.story3}})
    },
    gen4 () {
      this.$router.push({path: '/set_picture', query:{'story': this.story4}})
    },
    gen5 () {
      this.$router.push({path: '/set_picture', query:{'story': this.story5}})
    },
  }
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 675px;
  top: calc(50% - -350px);
}
.not-data {
  position: absolute;
  inset: 0;
}
.mobile-dumber {
  width: 267px;
  height: 407px;
  position: static;
}
.rectangle-1738 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 267px;
  height: 358px;
  position: absolute;
  left: 131px;
  top: 275px;
}
.mobile-dumber2 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 62.06px;
  position: absolute;
  left: 195px;
  top: 226px;
}
.synopsis {
  color: var(--_04, #9090ad);
  text-align: center;
  font: 500 14px "Manrope", sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs {
  color: var(--_03, #22215b);
  text-align: center;
  font: 700 14px "Manrope", sans-serif;
  position: absolute;
  left: 131px;
  top: 226px;
}
.mobile-dumber3 {
  width: 188.02px;
  height: 19px;
  position: static;
}
.mobile-dumber4 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 188.02px;
  position: absolute;
  left: 461px;
  top: 225px;
}
.2 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 700 14px "Manrope", sans-serif;
  position: relative;
}
.storyboard {
  color: var(--_04, #9090ad);
  text-align: center;
  font: 500 14px "Manrope", sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-square-2-big-1-primary {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 1190px;
  top: 279px;
}
.group-12 {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.button {
  background: #567df4;
  border-radius: 6px;
  width: 108px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.button-text {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 55px;
  left: 53px;
  bottom: 2px;
  top: 15px;
}
.button-square-2-big-1-primary2 {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 1191px;
  top: 354px;
}
.button-square-2-big-1-primary3 {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 1194px;
  top: 427px;
}
.button-text2 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 180px;
  left: 1227px;
  bottom: 489px;
  top: 287px;
  cursor:pointer;
}
.button-text3 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 179px;
  left: 1228px;
  bottom: 414px;
  top: 362px;
  cursor:pointer;
}
.button-text4 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 176px;
  left: 1231px;
  bottom: 341px;
  top: 435px;
  cursor:pointer;
}
.select-employee {
  position: absolute;
  inset: 0;
}
.rectangle-17382 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 684px;
  height: 54px;
  position: absolute;
  left: 463px;
  top: 275px;
}
.mobile-dumber5 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 60.75px;
  position: absolute;
  left: 474.25px;
  top: 265px;
}
._1 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 400 14px "Manrope", sans-serif;
  position: relative;
}
.rectangle-17383 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 684px;
  height: 54px;
  position: absolute;
  left: 461px;
  top: 349px;
}
.mobile-dumber6 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 60.75px;
  position: absolute;
  left: 472.25px;
  top: 339px;
}
._2 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 400 14px "Manrope", sans-serif;
  position: relative;
}
.rectangle-17384 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 684px;
  height: 54px;
  position: absolute;
  left: 461px;
  top: 423px;
}
.mobile-dumber7 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 60.75px;
  position: absolute;
  left: 472.25px;
  top: 413px;
}
._3 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 400 14px "Manrope", sans-serif;
  position: relative;
}
.button-square-2-big-1-primary4 {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 1194px;
  top: 506px;
}
.button-square-2-big-1-primary5 {
  width: 108px;
  height: 41px;
  position: absolute;
  left: 1194px;
  top: 580px;
}
.button-text5 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 176px;
  left: 1231px;
  bottom: 262px;
  top: 514px;
  cursor:pointer;
}
.button-text6 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 176px;
  left: 1231px;
  bottom: 188px;
  top: 588px;
  cursor:pointer;
}
.rectangle-17385 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 684px;
  height: 54px;
  position: absolute;
  left: 461px;
  top: 502px;
}
.mobile-dumber8 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 60.75px;
  position: absolute;
  left: 472.25px;
  top: 492px;
}
._4 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 400 14px "Manrope", sans-serif;
  position: relative;
}
.rectangle-17386 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 684px;
  height: 54px;
  position: absolute;
  left: 461px;
  top: 576px;
}
.mobile-dumber9 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 60.75px;
  position: absolute;
  left: 472.25px;
  top: 566px;
}
._5 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 400 14px "Manrope", sans-serif;
  position: relative;
}
.rectangle5 {
  width: 1440px;
  height: 100px;
  position: absolute;
  left: -295px;
  top: 700px;
}
.home {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 571px;
  top: 731px;
  width: 45px;
  height: 19px;
}
.services2 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 746px;
  top: 731px;
  width: 60px;
  height: 19px;
}
.services3 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 843px;
  top: 731px;
  width: 59px;
  height: 19px;
}
.services4 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 657px;
  top: 731px;
  width: 60px;
  height: 19px;
}
</style>
